<template>
  <view class="layout account">
    <view class="cu-list menu sm-border">
      <view class="cu-item arrow" @tap="setModalShow(true)">
        <view class="content">
          <ly-icons type="question" color="#889aa4" />
          <text class="text-grey">登录密码</text>
        </view>
      </view>
      <view class="cu-item arrow" @tap="onLogoff()">
        <view class="content">
          <ly-icons type="error-outline" color="#889aa4" />
          <text class="text-grey">账户注销</text>
        </view>
      </view>
    </view>
    <view class="cu-list menu">
      <view class="cu-item" @tap="onClickLogout"><view class="content text-red text-center">退出登录</view></view>
    </view>

    <view class="setPwdModal" v-if="showModal">
      <view class="modal-container">
        <view class="modal-header">
          <view class="title">设置登录密码</view>
          <view class="cuIcon-close text-gray" @tap="setModalShow(false)"></view>
        </view>
        <view class="modal-content">
          <view v-if="state.user.userInfo.hasPassword" class="input-item bg-gray">
            <input type="text" v-model="formData.oldPassword" confirm-type="next" placeholder-style="font-size:30upx;" placeholder="原密码" />
          </view>
          <view class="input-item bg-gray"><input v-model="formData.newPassword" type="password" placeholder-style="font-size:30upx;" placeholder="新密码" /></view>
          <view class="input-item bg-gray"><input v-model="newPassword2" type="password" placeholder-style="font-size:30upx;" placeholder="确认密码" /></view>
          <view class="btn"><button @tap="onSubmit" class="cu-btn bg-blue text-white round block">确 认</button></view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import uniApp from "@/utils/uni-app";
import user from "@/api/modules/user";
import lyIcons from "@/lyui/ly-icons/ly-icons";
export default {
  components: {
    lyIcons
  },
  data() {
    return {
      checkLogin: true,
      showModal: false,
      formData: {
        oldPassword: "",
        newPassword: ""
      },
      newPassword2: ""
    };
  },
  methods: {
    setModalShow(status) {
      this.showModal = status || false;
    },
    // 销户
    onLogoff() {
      uni.showModal({
        title: "危险行为",
        content: "执行该操作将会删除您账户所有信息,请确认后在操作",
        confirmText: "确定销户",
        cancelText: "手误返回",
        success: res => {
          if (res.confirm) {
            this.$store
              .dispatch("user/logoff")
              .then(_ => {
                uniApp.alert(_.data.msg, () => {
                  uni.reLaunch({
                    url: "/pages/common/home/index"
                  });
                });
              })
              .catch(e => {
                uniApp.alert(e.message || e.data.msg || "操作错误");
              });
          }
        }
      });
    },
    onSubmit() {
      if (this.$store.state.user.userInfo.hasPassword && this.formData.oldPassword.length <= 0) {
        uniApp.alert("请输入原密码");
        return;
      }
      if (!this.formData.newPassword) {
        uniApp.alert("请输入新密码");
        return;
      }
      if (this.formData.newPassword != this.newPassword2) {
        uniApp.alert("新密码两次输入不一致");
        return;
      }
      this.$store
        .dispatch("user/changePassword", this.formData)
        .then(_ => {
          this.showModal = false;
          this.formData.oldPassword = "";
          this.formData.newPassword = "";
          this.newPassword2 = "";
          uniApp.alert(_.data.data.msg || "密码修改成功");
        })
        .catch(e => {
          this.showModal = false;
          uniApp.alert(e.message || e.data.msg);
        });
    },
    onClickLogout() {
      this.$store.dispatch("user/logout").then(_ => {
        uniApp.toast("退出成功");
        uni.reLaunch({
          url: "/pages/common/home/index"
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.account {
  position: relative;
  height: 100%;
}
.arrow:before {
  color: #0f86c3 !important;
}
.text-grey{
  margin-left: 10rpx;
  color: #889aa4;
}
.setPwdModal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba($color: #000000, $alpha: 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  .modal-container {
    padding: 20upx 30upx;
    width: 85%;
    min-height: 200upx;
    background-color: #ffffff;
    border-radius: 10upx;
    .modal-header {
      position: relative;
      .title {
        text-align: center;
        font-size: 32upx;
      }
      .cuIcon-close {
        position: absolute;
        right: -10upx;
        top: -10upx;
        height: 60upx;
        width: 60upx;
        text-align: center;
        line-height: 60upx;
        font-size: 36upx;
      }
    }
    .modal-content {
      padding: 0 20upx;
      .input-item {
        height: 70upx;
        line-height: 70upx;
        border-radius: 70upx;
        margin: 30upx auto;
        input {
          width: 100%;
          height: 100%;
          padding: 0 30upx;
        }
      }
    }
  }
}
</style>
